<template>
	<view class="feedback">
		<view class="feedbackForm">
			<up-form :rules="rules" :model="store.form" errorType="message" ref="feedbackFormRef" >
			<view class="feedbackTitle">反馈类型</view>
			  <up-radio-group
			   class="feedbackGroup"
			    v-model="store.form.radiovalue"
			    placement="row"
				activeColor="#000033"
			  >
			    <up-radio
			      :customStyle="{marginBottom: '8px'}"
			      v-for="(item, index) in radiolist1"
			      :key="index"
			      :label="item.name"
			      :name="item.name"
			    >
			    </up-radio>
			  </up-radio-group>
			<view class="feedbackTitle">反馈内容</view>
			<up-form-item
					prop="feedbck_content"
					ref="item1"
					label-width="0px"
			>
				<up-textarea class="feedbckContent" v-model="store.form.feedbck_content" placeholder="请输入您的反馈内容"  maxlength="-1"
			style="background-color: #F7F7F7;"></up-textarea>
			</up-form-item>
			<view class="feedbackTitle">联系方式</view>
			<up-form-item
					prop="contact"
					ref="item2"
					label-width="0px"
			>
				<up-input class="feedbackContact" placeholder="请输入联系方式" v-model="store.form.contact" style="background-color: #F7F7F7;"></up-input>
			</up-form-item>
			</up-form>
			<up-button class="feedback_submit" type="primary" text="立即提交" color='#000033' shape='circle' @click="submit()"></up-button>
		</view>
	</view>
</template>

<script setup>
import { onUnmounted, reactive, ref } from 'vue';
import useFeedbckStore from '../../store/feedback';

const store=useFeedbckStore()
const feedbackFormRef=ref()

onUnmounted(()=>{
	store.form.radiovalue='故障'
	store.form.feedbck_content=''
	store.form.contact=''
})

const submit=()=>{
  feedbackFormRef.value.validate().then(valid => {  
	if (valid) {  
		store.feedBack()
	} else {  
	  uni.$u.toast('输入格式有误')
	}  
  }).catch(() => {  
});  
}

const radiolist1 = reactive([
  {
    name: '故障',
    disabled: false,
  },
  {
    name: '建议',
    disabled: false,
  },
  {
    name: '投诉',
    disabled: false,
  }
]);

const rules=reactive({
	feedbck_content:{
		type: 'string',
		required: true,
		message: '反馈内容不能为空',
		trigger: ['blur',]
	},
	contact:{
		type: 'string',
		required: true,
		message: '联系方式不能为空',
		trigger: ['blur',]
	}
})
</script>

<style scoped>
uni-page-body{
	height: 100%;
}
.feedback{
	display: flex;
	width: 750rpx;
	height: 100%;
	margin: 0 auto;
	background-color: #F7F7F7;
	box-sizing: border-box;
}
.feedbackForm{
	width:650rpx;
	background-color: white;
	margin-left: 50rpx;
	margin-right: 50rpx;
	margin-top: 50rpx;
	border-radius: 20rpx;
	padding: 50rpx;
	margin-bottom: 100rpx;
}
.feedbackTitle{
	 color: #7D8991;
}
.feedbackContact,.feedbackGroup,.feedbckContent{
	 margin-bottom: 20rpx;
	 margin-top: 30rpx;
}
.feedback_submit{
	 margin-top: 20rpx;
}
</style>
